<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
<script type="text/x-template" id="myComponent">
    <div>
    <span>总共要完成{{total}}件事情,已完成{{done}}件，还剩{{total-done}}件未完成</span>
    </div>
</script>
<script>
    window.onload = function () {
        Vue.component('todoWord', {
            props: ['total','done'],
            template: '#myComponent'
//            template: '<span>总共要完成{{total}}件事情,已完成{{done}}件，还剩{{total-done}}件未完成</span>'

        })
        var app4 = new Vue({
            el: '#app-4',
            data: {
               things:null,
                todolist: [
                    { name: '吃饭',done:false},
                    { name: '睡觉',done:false}
                ]
            },
            computed:{
                done:function(){
                    var count=0;
                    for(var i=0;i<this.todolist.length;i++){
                        if(this.todolist[i].done){
                            count++;
                        }
                    }return count;
                }
            },
            methods: {
                add:function () {
                    this.todolist.push({name:this.things,done:false});
                },
                switchdel:function(index){
                    this.todolist[index].done=!this.todolist[index].done;
                }
            }
        })
    }
</script>
<style> .del{text-decoration: line-through}</style>
</head>
<body>
<div id="app-4"  align="center" style="margin: 300px">
<table  style=" width: 300px;height: 200px">
        <th>Todo &nbsp; List</th>
    <tr>
        <td>
        <input v-model="things" v-on:keyup.enter="add">&nbsp;
        <button v-on:click="add" >添加</button></td>

</tr>
    <tr v-for="(todo,index) in todolist">
        <td><input type="checkbox" v-bind:checked="todo.done" v-on:click="switchdel(index)">{{index}}
        <span v-bind:class="{del:todo.done}">
            {{todo.name}}
        </span></td>
    </tr>
    <tr>
        <td>
  <todo-word :total="todos.length" :done="done"></todo-word></td>
    </tr>
</table>
</div>
</body>
</html>